body, html {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

body{
    background-color: #2f3542;
}
.cube{
    width: 250px;
    height: 250px;
    transform-style: preserve-3d;
    animation : rotate-cube 10s ease-in-out infinite;
}

.cube > div{
    width: 250px;
    height: 250px;
    background-size: cover;
    background-position: center center;
    opacity: 0.8;
    position: absolute;
    box-shadow: inset 0 0 4px 2px rgba(106, 106, 106,.4);
}

.cube .img1{
    background-image: url(img/1.jpg);
    transform: translateZ(125px);
}
.cube .img2{
    background-image: url(img/2.jpg);
    transform: rotateY(90deg) translateZ(125px);
}

.cube .img3{
    background-image: url(img/3.jpg);
    transform: rotateY(-90deg) translateZ(125px);
}
.cube .img4{
    background-image: url(img/4.jpg);
    transform: rotateX(90deg) translateZ(125px);
}
.cube .img5{
    background-image: url(img/5.jpg);
    transform: rotateX(-90deg) translateZ(125px);
}
.cube .img6{
    background-image: url(img/6.jpg);
    transform: rotateY(180deg) translateZ(125px);
}

@keyframes rotate-cube {
    0%,100%{
        transform: rotateX(0deg) rotateY(0deg);
    }
    20%{
        transform: rotateY(-90deg);
    }
    40%{
        transform: rotateX(-90deg);
    }
    60%{
        transform: rotateY(90deg);
    }
    80%{
        transform: rotateX(90deg);
    }
    
}




















